<template>
      <div class="header">
        <router-link to="/login" style="text-decoration: none">
        <el-icon style="margin-left: 30px;cursor: pointer" :size="30">
            <Avatar></Avatar>
        </el-icon>
        </router-link>
        <el-icon :size="30" style="cursor: pointer">
          <FullScreen ></FullScreen>
        </el-icon>
        <el-icon :size="30" style="cursor: pointer">
          <Service ></Service>
        </el-icon>
        <el-icon :size="30" style="margin-right: 30px;cursor: pointer">
          <BellFilled > </BellFilled >
        </el-icon>
      </div>
</template>


<script setup>

import {Avatar, BellFilled, FullScreen, Service} from "@element-plus/icons-vue";
</script>


<style scoped>
.header{
  width: 99%;
  height: 50px;
  background-color: #409EFF;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  top:0;
  z-index: 10000;
}
</style>